<template>
  <div class="app-container" style="height:calc(100vh - 114px)">
    <el-row :gutter="20" style="height: 100%;">
      <el-form ref="formRef" :inline="true" :model="form" style="width:100%">
        <el-col :span="24" style="height: 66px;width:100%" class="mb-3">
          <div style="width:100%;display: flex;display: -webkit-flex;align-items: center;">
            <div class="imgbox me-3">
              <el-image src="/public/ma.png" style="width:60%;height:60%"></el-image>
            </div>
            <h3 class="me-3" >第一步：扫描条形码-入库</h3>
            <el-input v-model="form.casecode"
             clearable
             @keyup.enter="handleEnter"
              style="width: 15vw;"/>
          </div>
        </el-col>
        <el-col :span="24" style="height: 66px;width:100%" class="mb-3">
          <div style="width:100%;display: flex;display: -webkit-flex;align-items: center;">
            <div class="imgbox me-3">
              <el-image src="/public/ma.png" style="width:60%;height:60%"></el-image>
            </div>
            <h3 class="me-3" >第一步：扫描存放位置</h3>
            <el-input v-model="form.position"
             clearable 
             @clear="getTableDataLists"
             ref="positionInput"
             @keyup.enter="handleEnterPosition"
             style="width: 15vw;"/>
          </div>
        </el-col>
      </el-form>
      <el-col :span="24">
        <el-table
            v-loading="loading"
            :data="TablesData"
            show-overflow-tooltip
            style="height: 250px;"
        >
            <el-table-column label="申请借阅人" prop="name"/>
            <el-table-column label="申请时间" prop="casetype"/>
            
            <el-table-column label="部门受案号" prop="userName"/>
            <el-table-column label="案件名称" prop="casetype"/>
            <el-table-column label="赃证物类别" prop="casetype"/>
            <el-table-column label="借出时间" prop="casetype"/>
            <el-table-column label="实际归还时间" prop="casetype"/>
            <el-table-column fixed="right" align="center" label="操作" width="140">
                <template #default="scope">
                    <el-button
                        link size="small"
                        type="danger"
                        @click="deleteData(scope.row)">
                        <el-icon class="me-1">
                            <Delete/>
                        </el-icon>
                        删除
                    </el-button>    
                </template>
            </el-table-column>
        </el-table>
        <!-- <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getTableDataLists"
        />
         -->
      </el-col>
      <el-col :span="24" style="display: flex;justify-content:center;">
        <el-button size="large" class="me-5" type="primary" @click="submitHandle" :disabled="isdisabled">确认入库</el-button>
        <el-button size="large" type="danger" @click="cancel" :disabled="isdisabled">取消入库</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const { proxy } = getCurrentInstance();
import PageEnum from "@/enum/PageEnum.js";
const loading = ref(false)
const isdisabled = ref(false)

const form = ref({})
const positionInput = ref(null);
const TablesData = ref([
    {name:'111',peoplename:"张三"},
    {name:'222',peoplename:"李四"},
    {name:'333',peoplename:"王五"},
])
const queryParams = ref({
    name: '',
    casecode: '',
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})
const total = ref(0)
const utterance = ref(null)
// 监控 casecode 的变化
// watch(() => form.value.casecode, (newVal) => {
//   // 检查新的值是否是6位数字
//   if (/^\d{6}$/.test(newVal)) {
//     console.log(33333);
//   }
// });
onMounted(() => {
  nextTick(() => {
    newPlayVoice()
  })
});
// 创建播放语音
const newPlayVoice = async () => {
  // 创建语音合成对象
  utterance.value = new SpeechSynthesisUtterance();
  // 设置语音参数
  utterance.value.lang = 'zh-CN';  // 中文
  utterance.value.volume = 1;      // 音量（范围 0 到 1）
  utterance.value.rate = 1;        // 语速（范围 0.1 到 10）
  utterance.value.pitch = 1;       // 音调（范围 0 到 2）
}
// 处理回车事件的函数
const handleEnter = () => {
  console.log(1);  // 输出2
  // 将焦点移到第二个输入框
  if (positionInput.value) {
    positionInput.value.focus();
  }
};
// 处理回车事件的函数
const handleEnterPosition = () => {
  console.log(2);  // 输出2
  // 将焦点移到第二个输入框
  if (positionInput.value) {
    positionInput.value.focus();
  }
};
// 获取案件列表
const getTableDataLists = async () => {
    // loading.value = true
    // await getCaseInfoList(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
    //     loading.value = false;
    //     TablesData.value = res.rows
    //     total.value = res.total;
    // });
}

// 播放卷宗扫码成功语音
const playSussVoice = async () => {
  // 设置文本内容
   utterance.value.text = "卷宗扫码成功";  
  // 停止当前播放的语音（如果有）
  speechSynthesis.cancel();

  // 播放语音
  speechSynthesis.speak(utterance.value);
}
// 播放卷宗扫码成功语音
const playErrorVoice = async () => {
  // 设置文本内容
   utterance.value.text = "存放点扫码成功";  
  // 停止当前播放的语音（如果有）
  speechSynthesis.cancel();
  // 播放语音
  speechSynthesis.speak(utterance.value);
}


const submitHandle = async () => {
  
}
const cancel = async () => {
  
  }

</script>
<style scoped>
    .imgbox{width:66px;height: 66px;background: #5471E5;border-radius: 33px;display: flex;display: -webkit-flex;align-items: center
    ;justify-content: center;}
    h3{font-weight: bold;width:190px}
</style>